<template>
  <div class="login">
    <div class="heade">
      <img src="../assets/96-96.png" alt="">
      <span>CPS流量变现后台管理系统</span>
    </div>
    <div class="account" v-if="stu === 0">
      <div class="login__header">账号登录</div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        class="demo-ruleForm"
        center
      >
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" type="text" autocomplete="on" size='large' autofocus placeholder="请输入您的手机号">
            <template #prefix>
                <el-icon>
                  <img src="../assets/userName.png" alt=""/>
                </el-icon>
              </template>
          </el-input>
          
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="on" size="large" placeholder="请输入您的密码">
            <template #prefix>
              <el-icon>
                <img src="../assets/passw.png" alt=""/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%;" size="large" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="fot">
        <div class="">注册账号</div>
        |
        <div class="">忘记密码</div>
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, reactive, ref} from 'vue'
import api from '../util/index.js'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const ruleForm = reactive({
      username: '',
      password: '',
    })
    const stu = ref(0)
    const uname1 = (rule, value, callback) => {
      
      if (value === '') {
        callback(new Error('请输入您的账号！'))
      } else {
        callback()
      }
    }
    const ps1  = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码！'))
      } else{
        if(value.length < 6)
        callback(new Error("密码不能小于6位！"))
        callback()
      }
    }
    const rules = reactive({
      username: [{ validator: uname1, trigger: 'blur' }],
      password: [{ validator: ps1, trigger: 'blur' }],
    })
    function handleLogin() {
      if(ruleForm.username === '') return ElMessage.error('账号不能为空！')
      if(ruleForm.password === '') return ElMessage.error('密码不能为空！')
      if(ruleForm.password.length < 6) return ElMessage.error('密码长度不能小于6位！')
      api.$post(
        '/login',
        {phone: ruleForm.username, password: ruleForm.password},
        res => {
          console.log('333',res)
        }
      )
      
    }
    const getinfo = () => {
      api.$get(
        '/merchant/overview',
        {},
        res => {
          console.log('dddd',res)
        }
      )
    }
    onMounted(() => {
      getinfo()
    })
    return {ruleForm, rules, handleLogin, stu} 
  }
}
</script>

<style scoped>
.login {width: 100%;min-height: 100vh;background: url('../assets/outer_bg.jpg') no-repeat fixed center;background-size: cover;display: flex;flex-direction: column;align-items: center;}
.heade {display: flex;align-items: center;font-size: 32px;color: #fff;margin-top: 90px;flex-wrap: nowrap;}
.heade span {margin-left: 10px;}
.account {width: 470px;border-radius: 20px;padding: 35px 40px;background-color: rgba(255, 255, 255, 0.1);border-radius: 10px;border: 3px solid #313a57;margin-top: 30px;box-sizing: border-box;}
.login__header {
  font-size: 28px;
  text-align: center;
  color: #fff;
  margin: 10px 0 40px 0;
}
.fot {display: flex;justify-content: space-around;align-items: center;margin-top: 40px;color: #fff;}
.fot div {cursor: pointer;}
    
</style>